<template>
	<view class="order-confirm">
		<view class="order-confirm-title">
			<view class="title">訂單詳情</view>
			<view class="close">
				<navigator open-type="navigateBack">
                    <text>返回</text>
                </navigator>
			</view>
		</view>
		<view class="order-confirm-main">
			<view class="left">
				<view class="detail-item">單號：{{detailData.Saleflow}}</view>
				<view class="detail-item">桌號：{{detailData.Tablenb}}</view>
				<view class="detail-item">服務費：${{detailData.ServiceMoney}}</view>
				<view class="detail-item">總計：<text style="color:#EF2F34;">$ {{totalPrice}}</text></view>
				<view class="btn">繼續訂單</view>
			</view>
			<scroll-view class="menu">
				<view class="menu-list">
					<view class="menu-item" v-for="(item, index) in detailData.Data" :key="index">
						<view class="imgBox">
							<image :src="item.image_full_url" mode="scaleToFill" lazy-load @error="menuImgErr(item)"></image>
						</view>
						<view class="menuText">
							<view class="name">{{item.name}}</view>
							<view class="price">$ {{item.price}}</view>
							<view class="note"></view>
							<view>x{{item.number}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import api from '../../static/js/api.js';
	
	export default {
		data(){
			return {
				detailData : {
					ServiceMoney : 0,
					Saleflow : '',
					Tablenb : '',
				},
			};
		},
		computed:{
			...mapState(['request_domain']),
			totalPrice(){
				let sum = 0;
				let serviceMoney = parseFloat(this.detailData['ServiceMoney']);
				for(let index in this.detailData['Data']){
					let price = parseFloat(this.detailData['Data'][index]['price']);
					let quantity = parseFloat(this.detailData['Data'][index]['number']);
					sum += price * quantity;
				}
				sum += serviceMoney;
				return sum;
			},
		},
		onLoad(params) {
			let self = this;
			api.request('/wechat/api/GetOrderDetails.ashx', {
				data : {
					key: params.key,
					saleflow: params.saleflow,
				},
				success(data){
					for(let index in data['Data']){
						data['Data'][index]['image_full_url'] = self.request_domain + '/getimg/' + data['Data'][index]['image_url'];
					}
					self.detailData = data;
				},
				fail(){
				},
			});
		},
		methods : {
			menuImgErr(item){
				item.image_full_url = require('../../static/images/default-menu-img.png');
			},
		},
	};
</script>

<style lang="scss">
	.order-confirm {
		width: 100%;
		height: 100%;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
	
		.order-confirm-title::before {
			content: "";
			flex: 1;
		}
	
		.order-confirm-title {
			height: 80upx;
			flex: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0px 0px 24px 0px rgba(70, 70, 70, 0.22);
			background-color: #fff;
	
			.title {
				flex: 1;
				color: #666666;
				text-align: center;
			}
	
			.close {
				flex: 1;
				color: #333333;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 20upx;
				font-size: 24upx;
				
				text{
					border-bottom: 1px solid #EF2F34;
					padding-bottom: 5upx;
				}
			}
		}
	
		.order-confirm-main {
			flex: 1;
			padding: 20upx 40upx;
			display: flex;
	
			.left {
				width: 250upx;
				flex: none;
				font-size: 24upx;
				color: #888888;
				border-right: 1px solid #aaa;
				padding-top: 20upx;
				padding-right: 40upx;
	
				.detail-item {
					border-bottom: 1px solid #AAAAAA;
					padding: 20upx 0;
				}
	
				.btn {
					width: 150upx;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #EF2F34;
					color: #fff;
					border-radius: 5upx;
					margin-top: 20upx;
				}
			}
	
			.menu {
				margin-left: 40upx;
			}
		}
	}
</style>
